<template>
	<div class="info " ref="info">
		<div class="right">
			<div class="list">
				<ArgList></ArgList>
				<InfoList :abstract="abstract" :data="InfoItems" v-model="InfoItems" :number="pageSize" v-on:Upnumber="upSize($event)"
				v-on:refresh="refresh()" :keywords="keywords"></InfoList>
				<div class="pagination">
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="currentPage1"
				      :page-sizes="[100, 80, 50, 30]"
				      :page-size="pageSize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total">
				    </el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import moment from 'moment'
	import ArgList from 'components/Home/ArgList'
	import InfoList from 'components/Home/InfoList'
	import pressList from 'components/Info/pressList'
	import { mapGetters } from 'vuex'
  
	export default{
		name:'info',
		components:{ArgList,InfoList,pressList},
		data() {
			return{
				currentPage1:1,
				activeName:'-1',
				leftMenu:true,
				abstract:true
			}
		},
		mounted(){
			this.$nextTick(()=>{
				this.$store.dispatch('qMessage',{
					that:this,
				});
			})
			
		},
		computed:{
			keywords(){
				return this.$store.state.Info.keywords
			},
			condition(){
				return this.$store.state.Info.condition
			},
			InfoItems(){
				return this.$store.state.Info.infoitems
			},
			total(){
				let total = this.$store.state.Info.total
				let num = total>3000?3000:total
				return num
			},
			pageSize(){
				return parseInt(this.$store.state.Info.limit)
			},
		},
		watch:{
			condition:{
				handler:function(val,oldVal){
						if(val.radiodata[5].checked == '列表'||'摘要'){
							if(val.radiodata[5].checked =='摘要'){
								this.abstract = false
							}else{
								this.abstract = true
							}
						}
						this.$store.dispatch('qMessage',{
			        that:this,
						});
						this.$store.dispatch('queryTypes',{
							that:this,
						})
				},
				deep:true
			},
			pageSize(){
				this.$store.dispatch('qMessage',{
			        that:this,
			        limit:this.currCount
			    });
			}
		},
		methods:{
			upSize(e){
				this.$store.commit('UPLIMIT',{
					limit:e
				})
			},
			refresh(){
				this.$store.dispatch('qMessage',{
			        that:this
			  });
			},
			goInformation:function(){
				this.$router.push('/details');
			},
			handleSizeChange(val) {
				this.$store.commit('UPLIMIT',{
					limit:val
				})
		  },
		  handleCurrentChange(val){
				this.$store.commit('LoadingTrue')
				this.$store.dispatch('qMessage',{
						that:this,
						_currentPage:val
				});
		  }
		}
	}
</script>
<style scoped>
	.block{
		float: right;
		padding: 1rem 3rem;
	}
	.info{
		display: flex;
		min-height: 100%;
		margin-right: 1.7rem;
	}

	.info .left{
		flex:0 0 12.5rem;
		width: 12.5rem;
		border-right: 1px solid #dcdcdc;
		background: #fff;
		transform: translate(-1.25rem);
		position: relative;
	}
	.info .left .open{
		position: absolute;
		top: -1px;
		right: -1.375rem;
		height: 3.2rem;
		width: 1.25rem;
		line-height: 3.2rem;
		background: #fff;
		border: 1px solid #dcdcdc;
	}
	.info .left .open .fa{
		margin-left: 0.18rem;
		font-size: 1.125rem;

	}
	.info .left .text{
		display: inline-block;
		padding-left: 1.56rem;
		font-size: 0.88rem;
		color: #333;
	}
	.info .assortment{
		position: relative;
		height: 3.75rem;
		line-height: 3.75rem;
		background: #eeeeee;
		border-bottom: 1px solid #dcdcdc;
	}
	.info .assortment .fa{
		position: absolute;
		font-size: 1.56rem;
		right: 3.125rem;
		top: 1.25rem;
	}
	.info .subNav{
		height: 3.2rem;
		border-bottom: 1px solid #dcdcdc;
		line-height: 3.2rem;
		cursor: pointer;
	}
	.info .subNav.active{
		background: #d9d1fa;
	}
	.info .navContent{
		overflow: hidden;
		transition:height 0.65s ease-in;
	}
	.info .navContent ul,.info .navContent ul li{
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.info .navContent ul{
		transition:all 0.65s ease-in;
	}
	.info .navContent ul li:last-child{
		border-bottom: 1px solid #dcdcdc;

	}
	.info .navContent ul:after{
		content: "";
		position: absolute;
		top: 0.88rem;
		bottom: 0.88rem;
		width: 0.18rem;
		left: 1.375rem;
		background: #0160c1;
	}
	.info .navContent{
		background: #eef6fa;
		transition:all 0.3s;
	}
	.info .navContent ul li{
		height: 4.25rem;
		line-height: 4.25rem;
		border-bottom: 1px solid #fff;
		transition:all 3s;
	}
	.info .navContent ul li .fa{
		margin-left: 2.5rem;
		font-size: 0.625rem;
		color: #eef6fa;
	}
	.info .navContent ul li .text{
		margin-left: 0.88rem;
	}
	.info .navContent ul li.active .fa,.info .navContent ul li.active .text{
		color: #0160c1;
	}
	.info .subNav span{
		display: block;
		padding-left: 1.56rem;
		font-size: 0.88rem;
		color: #333;
	}
	.info .right{
		flex:1;
		overflow: hidden;
		background: #fff;
	}
	.list{
		width: 100%;
	}
	.pagination{
		text-align: right;
		padding: 0.93rem 0.93rem;
	}

</style>